<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<script src="${base}/js/jquery-1.7.js"></script>
		
		<link rel="stylesheet" href="${base}/plugin/music/css/zplayer.min.css" />
		<script type="text/javascript" src="${base}/plugin/music/js/zplayer.min.js" ></script>
		
		<link rel="stylesheet" href="${base}/plugin/element/index.css">
		<script src="${base}/plugin/vue/vue.js"></script>
		<script src="${base}/plugin/element/index.js"></script>
		<title>zplayer</title>
	</head>
	<body>
	    <div id="guide" style="width: 500px;">  
		     <el-row>
			  <el-button onclick="loadData('HAPPY')" type="primary">漫步</el-button>
			  <el-button onclick="loadData('LOVE')" type="danger">求爱</el-button>
			  <el-button onclick="loadData('SAD')" type="info">伤感</el-button>
			  <el-button onclick="loadData('SILENCE')" type="warning">安静</el-button>
			  <el-button onclick="loadData('CHILD')" type="success">儿歌</el-button>
			  <el-button onclick="loadData('OLD')" type="success">老歌</el-button>
			  <el-button onclick="loadData('SHE')" type="success">SHE</el-button>

			 </el-row>
			  <br/>
			  <el-row>
			 	 <el-button onclick="refreshPage()" type="danger">刷新</el-button>
			  </el-row>
		</div>
	     <br/>
		<div  style="width: 500px;">  
			<div id="player1"></div>
		</div>
		<a href="${base}/music/upload/token">我来上传</a>
		<a href="${base}/index">回到首页</a>
		
		<script>
		window.onload=function(){
		}
		
		function refreshPage(){
		      window.location.reload();
		}
		
		function loadData(style){
			$.ajax({
			    url:'${base}/music/list',
			    type:'POST', //GET
			    contentType:'application/x-www-form-urlencoded',
			    async:false,    //或false,是否异步
			    data:{
			        style: style
			    },
			    timeout:5000,    //超时时间
			    dataType:'json',  
			    success:function(result,textStatus,jqXHR){
			    	var resultStr = JSON.stringify(result);
			    	result = $.parseJSON(resultStr);
			        initPlayer(result.data);
			    }
			})
		}
		
		function initPlayer(data){
		 	var zp1 = new zplayer({
		        element: document.getElementById("player1"),
		        autoPlay: 1,
		        musics: data
		    })
		    zp1.init();
		}
		</script>
		
		
	<script type="text/javascript">
	var content = new Vue({
		  el: '#guide'
		})
     </script>
		
	</body>
</html>
